<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import Textfield from '@smui/textfield';
	import { createMessage } from '$components/basic/message';
	import { alova } from '$utils/request';

	let question = '';
	let open = false;

	export let title = 'Commit Question';
	export function init() {
		open = true;
	}

	const on_confirm = async () => {
		await alova.Post('/member/edit', { title: question });

		createMessage({
			type: 'success',
			message: 'Commit Success',
			duration: 2000
		});
	};
</script>

<Dialog
	bind:open
	aria-labelledby="simple-title"
	aria-describedby="simple-content"
	container$class="items-start!"
	surface$class="max-w-100% mt-200px"
>
	<Title id="simple-title">{title}</Title>
	<Content id="simple-content">
		<form class="w-full">
			<Textfield
				type="text"
				class="w-full min-w-500px"
				variant="outlined"
				textarea={true}
				bind:value={question}
			/>
		</form>
	</Content>
	<Actions>
		<Button on:click={on_confirm} variant="raised" use={[InitialFocus]}>
			<Label>save</Label>
		</Button>
	</Actions>
</Dialog>
